<!-- 商家端订单详情 -->
<template>
	<view class="container">
		<view class="order_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" dark :background-color="transparentColor" status-bar title="订单详情" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 主体内容区域 -->
		<view class="order_main_out">
			<view class="order_main">
				<!-- 核销码区域 -->
				<view class="order_main_code">
					<view class="order_main_code_big">
						核销码 MC1234-5678-9012
					</view>
					<view class="order_main_code_small">
						车辆:奔驰FWE4/豫A98FHJ
					</view>
				</view>
				<!-- 服务内容区域 -->
				<view class="order_details_one">
					<view class="order_details_top">
						<view class="order_details_top_title">
							服务内容
						</view>
					</view>
					<view class="order_details_main">
						<view class="order_details_main_line_one">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									车辆精洗
								</view>
								<view class="order_details_main_money">
									￥100
								</view>
							</view>
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									车辆精洗附加费
								</view>
								<view class="order_details_main_money">
									￥10
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 订单信息区域 -->
				<view class="order_details_two">
					<view class="order_details_top">
						<view class="order_details_top_title">
							订单信息
						</view>
					</view>
					<view class="order_details_main">
						<view class="order_details_main_line_one">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									原价
								</view>
								<view class="order_details_main_money">
									￥110
								</view>
							</view>
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									优惠
								</view>
								<view class="order_details_main_money">
									￥20
								</view>
							</view>
						</view>
						<view class="order_details_main_line_two">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									实付金额
								</view>
								<view class="order_details_main_money">
									￥90.00
								</view>
							</view>
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									订单编号
								</view>
								<view class="order_details_main_money">
									1223233445
								</view>
							</view>
						</view>
						<view class="order_details_main_line_three">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									预约时间
								</view>
								<view class="order_details_main_money">
									2023-03-18 19:00:00
								</view>
							</view>
						</view>
						<view class="order_details_bottom">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									支付时间
								</view>
								<view class="order_details_main_money">
									2023-03-18 19:14:28
								</view>
							</view>
						</view>
						<view class="order_details_bottom">
							<view class="order_details_main_line">
								<view class="order_details_main_title">
									核销时间
								</view>
								<view class="order_details_main_money">
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 按钮区域 -->
			<view class="order_main_fore">
				<view class="order_main_fore_button" v-if="!affirm"  @click="inputDialogToggle">
					确认核销
				</view>
				<view class="order_main_fore_button_checked" v-if="affirm"  @click="inputDialogToggle">
					已核销
				</view>
			</view>
		</view>
		<!-- 对话框 -->
		<view class="part5">
		<!-- 	<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="base" title="输入内容" value="124" placeholder="请输入内容"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup> -->
			<uni-popup ref="inputDialog" type="dialog">
				<!-- uni-popup-dialog 组件，使用默认插槽 -->
				 <uni-popup-dialog ref="inputClose" mode="base" title="核销此订单" @confirm="dialogInputConfirm">
					<!-- 默认插槽，添加自定义输入框 -->
					<template #default>
						<view class="dialogcontent">
							请仔细核对订单，此操作不可撤销请谨慎操作
						</view>
					</template>
				</uni-popup-dialog>
				</uni-popup>
			<!-- <button class="button" type="primary" @click="inputDialogToggle"><text class="button-text">输入对话框</text></button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				status: '-1',
				// msgType: 'success',
				// type: 'center',
				isVerificat:false,
				affirm: false,
				list: [
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
					{status: '4'},
					{status: '5'},
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
				],
			}
		},
		methods: {
			optionChecked(val) {
				this.status = val
			},
			back() {
				uni.navigateBack()
			},
			inputDialogToggle() {
				if(this.isVerificat){
					uni.showToast({
						title: '已核销过，请勿重复核销'
					});
					return;
				}
				this.$refs.inputDialog.open("center")
			},
			dialogInputConfirm(val) {
				uni.showToast({
					title: '点击了确认'
				})
				this.isVerificat=true;
				// 改变按钮
				this.affirm = true
				console.log(this.isVerificat);
				setTimeout(() => {
					// uni.hideLoading()
					// console.log(val)
			
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					
				}, 3000)
			},
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
.order_header {
	height: 400rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* 主体内容区域开始 */
.order_main_out {
	padding: 0 20rpx;
	position: relative;
	top: -270rpx;
}
.order_main {
	background-color: #fff;
	padding: 10rpx 26rpx;
	border-radius: 16rpx;
}
/* 核销码区域开始 */
.order_main_code {
	padding: 26rpx 0 10rpx;
	border-bottom: 8rpx solid #F7F7F7;
}
.order_main_code_big {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 38rpx;
}
.order_main_code_small {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
}
/* 核销码区域结束 */
/* 卡片顶部区域开始 */
.order_details_one {
	padding: 10rpx 0;
	border-bottom: 8rpx solid #F7F7F7;
}
.order_details_two {
	padding: 10rpx 0;
	/* border-bottom: 8rpx solid #F7F7F7; */
}
.order_info_top,.order_details_top {
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
}
.order_info_top_title,.order_details_top_title {
	font-size: 38rpx;
}
/* 卡片顶部区域结束 */
/* 卡片内容区域开始 */

/* 卡片内容区域结束 */

/* 卡片底部区域开始 */
.order_details_main {
	padding-bottom: 0;
	font-size: 28rpx;
}
.order_details_main_line {
	height: 70rpx;
	line-height: 70rpx;
	display: flex;
	justify-content: space-between;
}
/* 卡片底部区域结束 */
/* 按钮区域开始 */
.order_main_fore {
	/* position: relative; */
	margin: 70rpx 0;
}
.order_main_fore_button {
	width: 600rpx;
	height: 72rpx;
	line-height: 70rpx;
	border-radius: 44rpx;
	background-color: #0662E6;
	color: #fff;
	text-align: center;
	margin: auto;
	font-size: 28rpx;
}
.order_main_fore_button_checked {
	width: 600rpx;
	height: 72rpx;
	line-height: 70rpx;
	border-radius: 44rpx;
	background-color: #808080;
	color: #fff;
	text-align: center;
	margin: auto;
	font-size: 28rpx;
}
/* 按钮区域结束 */
/* 主体内容区域结束 */
/* 弹窗区域开始 */
::v-deep .uni-dialog-title-text{
	color: #000;
}
.dialogcontent{
	text-align: center;
}
::v-deep .uni-dialog-button-group{
	border: none;
}
::v-deep .uni-dialog-button{
	border: none;
}
.uni-popup__error {
	color: #000 !important;
}
/* 弹窗区域开始 */
</style>